<script setup>
import { ref, computed } from "vue";
const { safeAreaInsets } = uni.getSystemInfoSync();
import { onHide, onLoad } from "@dcloudio/uni-app";
import { useCookieStore } from "@/stores";
import { getLoginStatusApi } from "@/apis/login";
import { getUserPlayListAPi } from "@/apis/musicList";
import MyLoginPhone from "./components/MyLoginPhone.vue";
import MyLoginQr from "./components/MyLoginQr.vue";
import MySongList from "./components/MySongList.vue";
import MyLikeList from "./components/MyLikeList.vue";

const cookieStore = useCookieStore();

const loginPopup = ref(null);
const showLoginPopup = () => {
  showLogin.value = "phone";
  loginPopup.value.open();
};
const closeLoginPopup = () => {
  showLogin.value = "unMount";
  loginPopup.value.close();
};

const showLogin = ref("phone");
const objectStyle = computed(() => {
  if (showLogin.value === "phone") {
    return {
      animation: "leftScrollTabBarBg 0.4s",
      "animation-fill-mode": "forwards",
    };
  } else {
    return {
      animation: "rightScrollTabBarBg 0.4s",
      "animation-fill-mode": "forwards",
    };
  }
});
onHide(() => {
  closeLoginPopup();
});

const onLoginSuc = async () => {
  uni.showToast({ title: "登录成功" });
  const { data } = await getLoginStatusApi({
    cookie: cookieStore.cookie.cookie,
  });
  await cookieStore.getUserInfo(data.account.id);
  loginPopup.value.close();
};

const playList = ref([]);
const likePlayList = ref([]);
const createSongList = computed(() => {
  return playList.value.filter((item) => {
    if (item.creator.userId === cookieStore.info.profile.userId) return item;
  });
});

const collectSongList = computed(() => {
  return playList.value.filter((item) => {
    if (item.creator.userId !== cookieStore.info.profile.userId) return item;
  });
});

const isShowCreateList = ref(true);

onLoad(async () => {
  if (!cookieStore.cookie.cookie) return;
  const { data } = await getLoginStatusApi({
    cookie: cookieStore.cookie.cookie,
  });
  await cookieStore.getUserInfo(data.account.id);
  const listData = await getUserPlayListAPi({
    uid: data.account.id,
    cookie: cookieStore.cookie.cookie,
  });
  if (!listData.code === 200)
    return uni.showToast({
      title: "获取用户歌单时，出现错误",
      icon: "none",
    });
  playList.value = listData.playlist.slice(1, listData.playlist.length);
  likePlayList.value = listData.playlist.slice(0, 1)[0];
});
</script>

<template>
  <view class="my-page" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
    <!-- 登录弹出层 -->
    <uni-popup ref="loginPopup" type="center" s-mask-click="false">
      <view
        class="login-popup"
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
      >
        <view class="close-popup" @tap="closeLoginPopup">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <view class="tab-bar-wrap">
          <view class="tab-bar-bg" :style="objectStyle"> </view>
          <view class="tab-bar-title">
            <view
              class="title"
              @tap="showLogin = 'phone'"
              :class="{ titleColor: showLogin === 'phone' }"
              >手机号登录</view
            >
            <view
              class="title"
              @tap="showLogin = 'qrCode'"
              :class="{ titleColor: showLogin === 'qrCode' }"
              >二维码登录</view
            >
          </view>
        </view>
        <MyLoginPhone v-if="showLogin === 'phone'" />
        <MyLoginQr @loginSuc="onLoginSuc" v-if="showLogin === 'qrCode'" />
      </view>
    </uni-popup>
    <!-- / 登录弹出层 -->
    <view class="login-wrap" v-if="cookieStore.cookie.cookie">
      <view class="user-wrap">
        <image
          :src="cookieStore.info.profile.avatarUrl + '?param=200y200'"
          mode="aspectFit"
        />
      </view>
      <view class="user-name-wrap">
        <view class="user-name ellipsis1">
          {{ cookieStore.info.profile.nickname }}
        </view>
        <view
          :class="{ level1: cookieStore.info.profile.vipType === 11 }"
        ></view>
      </view>
      <view class="lever-info" @tap="userInfoStore.getAccountInfo()">
        <text class="info">
          {{ cookieStore.info.profile.followeds }} 关注
        </text>
        <text class="info"> {{ cookieStore.info.profile.follows }} 粉丝 </text>
        <text class="info"> Lv.{{ cookieStore.info.level }} </text>
      </view>
    </view>
    <view class="login-wrap" v-else>
      <view class="user-wrap" @tap="showLoginPopup">
        <i class="iconfont icon-wode"></i>
      </view>
      <view class="user-name-wrap">
        <view class="user-name ellipsis1">点击头像登录</view>
      </view>
      <view class="lever-info">
        <text class="info">0 关注</text>
        <text class="info">0 粉丝</text>
        <text class="info">Lv.0</text>
      </view>
    </view>

    <view class="song-list">
      <MyLikeList :list="likePlayList" />
    </view>

    <view class="switch-song-list-wrap">
      <view class="switch-text-wrap" @tap="isShowCreateList = true">
        <view class="switch-text" :class="{ switchTextColor: isShowCreateList }"
          >创建歌单</view
        >
        <view
          class="switch-bg"
          :class="{ switchBgColor: isShowCreateList }"
        ></view>
      </view>
      <view class="switch-text-wrap" @tap="isShowCreateList = false">
        <view
          class="switch-text"
          :class="{ switchTextColor: !isShowCreateList }"
          >收藏歌单</view
        >
        <view
          class="switch-bg"
          :class="{ switchBgColor: !isShowCreateList }"
        ></view>
      </view>
    </view>
    <view class="song-list" v-show="isShowCreateList">
      <MySongList :list="createSongList" title="创建歌单" />
    </view>
    <view class="song-list" v-show="!isShowCreateList">
      <my-song-list :list="collectSongList" title="收藏歌单">
        <template #creator="nickname"> ，by {{ nickname.nickname }} </template>
      </my-song-list>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.my-page {
  padding: 0 30rpx;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url("@/static/center_bg.png");
  background-size: 100% auto;
  overflow: hidden;
  .login-popup {
    height: 100vh;
    width: 750rpx;
    background-color: rgba(255, 255, 255, 1);
    justify-content: flex-start !important;
    align-items: flex-start !important;
    .close-popup {
      margin-left: 30rpx;
      margin-top: 35rpx;
      height: 60rpx;
      width: 60rpx;
      background-color: #e4e4e4;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tab-bar-wrap {
      position: relative;
      margin: 80rpx 30rpx 0 30rpx;
      height: 78rpx;
      background-color: rgb(232, 232, 232);
      border-radius: 50rpx;
      overflow: hidden;
      display: flex;
      .tab-bar-bg {
        position: absolute;
        z-index: 1;
        top: 4rpx;
        left: 4rpx;
        bottom: 4rpx;
        height: 70rpx;
        width: 50%;
        border-radius: 50rpx;
        background-color: $primaryColor;
      }
      @keyframes leftScrollTabBarBg {
        from {
          left: 345rpx;
        }
        to {
          left: 5rpx;
        }
      }
      @keyframes rightScrollTabBarBg {
        from {
          left: 5rpx;
        }
        to {
          left: 345rpx;
        }
      }
      .tab-bar-title {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 3;
        display: flex;
        .title {
          width: 50%;
          text-align: center;
          line-height: 80rpx;
          font-size: 28rpx;
        }
        .titleColor {
          color: #fff;
        }
      }
    }
  }
  .login-wrap {
    display: inline-block;
    margin-top: 160rpx;
    height: 220rpx;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    position: relative;
    .user-wrap {
      position: absolute;
      top: -75rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
      height: 150rpx;
      width: 150rpx;
      background-color: #fff;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-wode {
        font-size: 120rpx;
      }
    }

    .user-name-wrap {
      padding: 0 14rpx;
      margin-top: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .user-name {
        line-height: 60rpx;
      }
      .level1 {
        margin-left: 14rpx;
        height: 34rpx;
        width: 90rpx;
        background-repeat: no-repeat;
        background-image: url("@/static/level/1.png");
        background-size: 100% auto;
      }
    }
    .lever-info {
      display: flex;
      justify-content: center;
      margin-top: 14rpx;
      color: $assistText;
      font-size: 26rpx;
      .info {
        margin: 0 20rpx;
      }
    }
  }
  .switch-song-list-wrap {
    padding: 0 30rpx;
    margin-top: 20rpx;
    // background-color: red;
    height: 70rpx;
    display: flex;
    align-items: center;
    .switch-text-wrap {
      height: 70rpx;
      width: 50%;
      color: $assistText;
      font-size: 28rpx;
      font-weight: bold;
      letter-spacing: 2rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.2s linear;
      .switchTextColor {
        color: $primaryText;
      }
      .switch-bg {
        margin-top: 6rpx;
        height: 6rpx;
        width: 30rpx;
        border-radius: 4rpx;
        transition: all 0.2s linear;
      }
      .switchBgColor {
        background-color: $primaryColor;
      }
    }
  }
  .song-list {
    margin: 20rpx 0;
    overflow: hidden;
  }
}
</style>
